<!--
 * @Author: your name
 * @Date: 2020-08-22 01:51:42
 * @LastEditTime: 2020-08-26 21:06:52
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \exam-list\src\components\checkpaper\PaperDetail.vue
-->
<template>
  <div>
    <p>试题分类</p>
    <Card>
      <!-- 添加按钮 -->
      <Button type="primary" @click="addType">+ 添加类型</Button>

      <!-- 对话框 -->
      <Modal v-model="modal" title="创建新类型" @on-ok="ok">
        <Input v-model="value" placeholder="请输入类型名称" style="width: 300px" />
        <Input v-model="sort" placeholder="请输入类型名称" style="width: 300px" />
      </Modal>

      <!-- 数据表格 -->
      <Table border :columns="columns" :data="data" style="margin-top:20px">
        <template slot-scope="{ row }" slot="name">
          <strong>{{ row.name }}</strong>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <Button type="error" @click="remove(index,row)">删除</Button>
        </template>
      </Table>
    </Card>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  data() {
    return {
      columns: [
        {
          title: '类型ID',
          key: 'questions_type_id'
        },
        {
          title: '类型分类',
          key: 'questions_type_text'
        },
        {
          title: '操作',
          slot: 'action'
        }
      ],
      // input输入框
      value: '',
      sort: '',
      modal: false
    }
  },
  methods: {
    ...mapActions('addType', ['get', 'delete', 'add']),
    // 删除
    remove(index, row) {
      const id = { id: row.questions_type_id }
      this.delete(id)
      this.get()
    },
    // 点击添加类型
    addType() {
      this.modal = true
    },
    // 确认对话框
    ok() {
      const obj = {
        text: this.value,
        sort: this.sort
      }
      this.add(obj)
      this.get()
    }
  },
  computed: {
    ...mapState('addType', ['data'])
  },
  created() {
    this.get()
  }
}
</script>

<style lang="scss" scoped>
</style>
